<section [formGroup]="mathFunctionConfigForm" fxLayout="column">
  <tb-math-function-autocomplete
    fxFlex="30" fxFlex.md fxFlex.xs
    required
    formControlName="operation">
  </tb-math-function-autocomplete>
  <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
    <legend class="group-title" translate>tb.rulenode.argument-tile</legend>
    <tb-arguments-map-config formControlName="arguments"
                             [function]="mathFunctionConfigForm.get('operation').value">
    </tb-arguments-map-config>
  </fieldset>
  <fieldset *ngIf="mathFunctionConfigForm.get('operation').value === MathFunction.CUSTOM"
            class="fields-group" fxLayout="column" fxLayoutGap="8px">
    <legend class="group-title">{{'tb.rulenode.custom-expression-field-input' | translate }} *</legend>
    <mat-form-field fxFlex class="mat-block no-margin-top" subscriptSizing="dynamic">
      <input matInput formControlName="customFunction" required/>
      <mat-error *ngIf="mathFunctionConfigForm.get('customFunction').hasError('required')" translate>
        tb.rulenode.custom-expression-field-input-required
      </mat-error>
      <mat-hint translate>tb.rulenode.custom-expression-field-input-hint</mat-hint>
    </mat-form-field>
  </fieldset>
  <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
    <legend class="group-title" translate>tb.rulenode.result-title</legend>
    <div formGroupName="result">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>tb.rulenode.type-field-input</mat-label>
        <mat-select formControlName="type" required>
          <mat-select-trigger>
            {{ argumentTypeResultMap.get(mathFunctionConfigForm.get('result.type').value)?.name | translate }}
          </mat-select-trigger>
          <mat-option *ngFor="let argument of argumentsResult" [value]="argument"
                      style="border-bottom: 1px solid #eee;">
            {{ argumentTypeResultMap.get(argument).name | translate }}
            <small style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
              {{ argumentTypeResultMap.get(argument).description }}
            </small>
          </mat-option>
        </mat-select>
        <mat-error *ngIf="mathFunctionConfigForm.get('result.type').hasError('required')" translate>
          tb.rulenode.type-field-input-required
        </mat-error>
      </mat-form-field>
      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
        <mat-form-field fxFlex class="mat-block" *ngIf="mathFunctionConfigForm.get('result').get('type').value === ArgumentTypeResult.ATTRIBUTE">
          <mat-label translate>tb.rulenode.attribute-scope-field-input</mat-label>
          <mat-select required formControlName="attributeScope">
            <mat-option *ngFor="let scope of attributeScopeResult" [value]="scope">
              {{ attributeScopeMap.get(scope) | translate }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field fxFlex floatLabel="always" class="mat-block">
          <mat-label translate>tb.rulenode.key-field-input</mat-label>
          <input matInput formControlName="key" required/>
          <mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
                    color="primary"
                    matTooltip="{{ 'tb.rulenode.math-templatization-tooltip' | translate }}">help</mat-icon>
          <mat-error *ngIf="mathFunctionConfigForm.get('result.key').hasError('required')" translate>
            tb.rulenode.key-field-input-required
          </mat-error>
        </mat-form-field>
      </div>
      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
        <mat-form-field fxFlex floatLabel="always" class="mat-block" subscriptSizing="dynamic">
          <mat-label translate>tb.rulenode.number-floating-point-field-input</mat-label>
          <input formControlName="resultValuePrecision"
                 matInput
                 step="1" min="0"
                 type="number"/>
          <mat-hint [innerHTML]="'tb.rulenode.number-floating-point-field-input-hint' | translate | safe: 'html'"></mat-hint>
        </mat-form-field>
      </div>
      <div *ngIf="[ArgumentTypeResult.ATTRIBUTE, ArgumentTypeResult.TIME_SERIES].includes(mathFunctionConfigForm.get('result').get('type').value)"
           fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start" fxLayoutGap.gt-xs="16px" style="padding-top: 16px;">
        <mat-checkbox formControlName="addToBody">
          {{'tb.rulenode.add-to-message-field-input' | translate }}
        </mat-checkbox>
        <mat-checkbox formControlName="addToMetadata">
          {{'tb.rulenode.add-to-metadata-field-input' | translate}}
        </mat-checkbox>
      </div>
    </div>
  </fieldset>
</section>
